<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="addBtn">添加一条新的访客信息</button>
    <button id="delBtn2">删除选中</button>
    <button id="sortBtn">年龄从小到大</button>
    <table border="" cellspacing=0 cellpadding=10 style="border-collapse: collapse;">
        <thead>
            <tr>
                <th>序列号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
                <th>选择</th>
            </tr>
        </thead>
        <tbody id="tbodyList">
        </tbody>
    </table>
    <script>
        let info = [{
            name: "胡杭",
            age: 16
        }, {
            name: "胜明",
            age: 22
        }, {
            name: "军毅",
            age: 21
        }, {
            name: "晓华",
            age: 13
        }, {
            name: "盛聪",
            age: 23
        }, {
            name: "侦剑",
            age: 32
        }, {
            name: "红翔",
            age: 25
        }, {
            name: "超维",
            age: 18
        }, {
            name: "士琪",
            age: 22
        }, {
            name: "艳华",
            age: 20
        }];


        let addBtn = document.querySelector("#addBtn");
        let tbodyList = document.querySelector("#tbodyList");
        let delBtn1; //删除行
        let newTr; //创建新的tr
        let index = 0; //获取数组索引值



        addBtn.onclick = function() {
            if (index < info.length) {
                newTr = document.createElement("tr");
                tbodyList.append(newTr);

                // 新的tr添加td单元格
                newTr.innerHTML = `
                <td>${index+1}</td>
                <td>${info[index].name}</td>
                <td>${info[index].age}</td>
                <td><button>删除</button></td>
                <td><input type="checkbox" name="choose"></td>`;

                delBtn1 = tbodyList.querySelectorAll("button"); //因为是静态NodeList对象，所以每次都要重新绑定事件
                delBtn1.forEach(function(ele) {
                    ele.onclick = function() {
                        ele.parentElement.parentElement.remove();
                    }
                });


                let delBtn2 = document.querySelector("#delBtn2"); //删除选中
                let choose;
                delBtn2.onclick = function() {
                    choose = document.querySelectorAll("input[type='checkbox']");
                    choose.forEach(function(ele) {
                        if (ele.checked) {
                            ele.parentElement.parentElement.remove();
                        }
                    });
                };

                let sortBtn; //排序
                sortBtn.onclick = function() {
                    sortBtn = document.querySelector("sortBtn");
                    info.forEach(function(item) {
                        console.log(item);
                    })
                };
                index++; // 添加完毕后自增
            };
        };
    </script>
</body>

</html>